<template>
  <div class="container" @click="handleGallartClick">
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(img,index) in imgs" :key="index">
          <img
            class="img"
            :src="img"
          />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonGallary",
  props:{
      imgs:Array
  },
  methods:{
      handleGallartClick(){
          this.$emit('close')
      }
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",

        },
        loop:true,
        clickable: true,
        paginationType:'fraction',
        observeParents:true,
        observer:true
        // ...

      },
    };

  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(0, 1000, false);
  },
};
</script>

<style scoped lang="stylus">
.container >>> .swiper-pagination {
  overflow: inherit;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: black;

  .wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    background: #fff;

    // overflow: hidden;
    .img {
      width: 100%;
    }
  }
}
</style>